<template>
  <div class="home">
		<Header :name="group.groupName" :title="factory.title"/>
		<PatchBox :list="topList"/>
		<div class="content">
			<aside class="aside-box aside-left">
				<Moudle title="设备稼动率">
					<Echarts class="h15" type="line" :options="echarts[1]"/>
				</Moudle>
				<Moudle title="7日成品率对比">
					<Echarts class="h15" type="line" :options="yieIdWeek"/>
				</Moudle>
				<Moudle title="成品率">
					<div style="display: flex;">
						<Echarts class="h15" v-for="(v,i) in yieIds" :key="i" :options="v"/>
					</div>
				</Moudle>
				<Moudle title="各工厂机组数量">
					<router-link 
						class="fz2" 
						v-for="item in factorysUrl" 
						:key="item.id" 
						:to="{name: 'Factory', params: {factoryId:item.id}}">
						{{item.title}}：{{item.jizuNum}}<br />
					</router-link>
				</Moudle>
			</aside>
			<div class="center-box">
				<div class="map-box">
					<Map :markersData="markersData" @handleMarker="handleMarker" />
					<Dialog :title="factoryMsg['工厂名称']" :show="showDetail" @handleClose="showDetail=false">
						<FactoryMsg :factoryMsg="factoryMsg"/>
					</Dialog>
				</div>
				<FactoryMsg class="factory-msg" :styles="{width: '50%'}" :factoryMsg="factoryMsg"/>
			</div>
			<aside class="aside-box aside-right">
				<Moudle title="近一周产能">
					<Echarts class="h15" type="line" :options="echarts[2]"/>
				</Moudle>
				<Moudle title="每月产能">
					<Echarts :options="echarts[3]"/>
				</Moudle>
				<Moudle title="累计产能">
					<Echarts :options="echarts[4]"/>
				</Moudle>
			</aside>
		</div>
  </div>
</template>

<script>
import {dataMaper, factoryMsgMaper} from '../mock/data/maper.js'
import {mapState} from 'vuex'
export default {
  name: 'Home',
	data(){
		return{
			groupId: 1,
			factoryId: 1,
			showDetail: false,
			topList: [],
			yieIds: [{}, {}],
			echarts: [],
			names: [],
			yieIdWeek: {},
			
			// 集团下各工厂数据分类存储
			markersData: [],
			factorysUrl: [],
			factorysName: []
		}
	},
	computed:{
		...mapState(['groups', 'factorys']),
		weekDays(){
			return this.$store.getters.weekDays;
		},
		group(){
			if(!this.groups.length) return {};
			return this.groups.find((v) => v.id == this.groupId);
		},
		factory(){
			if(!this.factorys.length) return {};
			return this.factorys.find((v) => v.id == this.factoryId);
		},
		// 当前工厂要显示在marker和地图下面的信息
		factoryMsg(){
			let obj = {};
			for(let key in factoryMsgMaper){
				obj[factoryMsgMaper[key]] = this.factory[key];
			}
			return obj;
		}
	},
	watch:{
		group(){
			this.getTopData();
		},
		// 把各工厂的数据分类给需要的地方，并进行设置data
		factorys(list){
			list.forEach((v) => {
				let {id, lng, lat, title, jizuNum} = v;
				// marker，设备数量的数据
				this.markersData.push({id, lng, lat});
				this.factorysUrl.push({id, title, jizuNum});
				this.factorysName.push(title);
			})
			
			
			let names = [];
			list.forEach((v) => {
				names.push(v.title.slice(0, 2))
			})
			this.names = names;
			this.initEcharts();
			this.$nextTick(() => {
				this.setEcharts(list);
			})
		}
	},
	methods:{
		getTopData(){
			let arr = [],
					keys = ['factorySum', 'jizuNum', 'jdlNum', 'totalNum', 'monthNum', 'todayNum'];
			keys.forEach((key) => {
				let {title, unit, type} = dataMaper[key];
				arr.push({title, value: this.group[key] + unit, type});
			})
			this.topList = arr;
		},
		handleMarker(id){
			this.showDetail = true;
			this.factoryId = id;
		},
		// 初始化各个图表的设置，以后这些设置就不需要设置了，这里series数据不更新
		initEcharts(){
			// 各工厂成品率
			let names = this.names,
					width = 75;
			switch(names.length){
				case 2:
					width = 66;
					break;
				case 3:
					width = 50;
					break
			}
			for(let i in names){
				this.yieIds[i] = {
					formatter:"{b}：{c}%", 
					title: {
						text: names[i], 
						textStyle:{
							color: '#d70',
							fontSize: 18
							
						},
						x: 'center'
					},
					series: [{
						radius: width+'%', 
						center: ['50%', '54%']
					}]
				};
			}
			// 其它echarts初始化，由于全放空数组里面会导致跳转后数据不更新，把第一项设置到一个响应式属性上就可以了，
			// 或者数组加一项也可以完成响应式但数据更新加载会更慢，原理未知
			let week = ['yieIdWeek', 'jdlNumWeek', 'weekNum'],
					datas = {
						yieIdWeek: [],
						jdlNumWeek: [],
						weekNum: []
					},
					legend = {
						left: 'left',
						top: -5,
						data: this.names,
						textStyle:{
							color: '#fff'
						}
					},
					grid = {
						top: '17%'
					},
					tooltip = {
						trigger: 'axis',
						formatter: ''
					},
					xAxis = {
						data: this.weekDays
					};
			
			names.forEach((v,i) => {
				week.forEach((key) => {
					datas[key].push({name: names[i], smooth: true, type: 'line'});
				})
			})
			this.yieIdWeek = {legend, grid, yAxis: {max: 100}, tooltip, xAxis, series: datas.yieIdWeek};
			this.echarts[1] = {legend, grid, yAxis: {max: 100}, tooltip, xAxis, series: datas.jdlNumWeek};
			this.echarts[2] = {legend, grid, yAxis: {axisLabel: {formatter: '{value} 吨'}}, tooltip, xAxis, series: datas.weekNum};
			this.echarts[3] = {formatter: "{b}：{c}吨"};
			this.echarts[4] = {formatter: "{b}：{c}吨"};
		},
		// 更新series
		setEcharts(val){
			// 各工厂成品率数据设置
			for(let i in this.names){
				this.yieIds[i] = {
					series: [{data: val[i].yieId}]
				};
			}
			
			let week = ['yieIdWeek', 'jdlNumWeek', 'weekNum'],
					datas = {
						yieIdWeek: [],
						jdlNumWeek: [],
						weekNum: [],
						totalNum: [],
						monthNum: [],
						yieId: []
					};
					
			val.forEach((v, i) => {
				week.forEach((key) => {
					datas[key].push({data: v[key]});
				})
				datas.totalNum.push({name: this.names[i], value: v.totalNum});
				datas.monthNum.push({name: this.names[i], value: v.monthNum});
			})
			
			// 除成品率外其它的图表数据设置
			this.yieIdWeek = {series: datas.yieIdWeek};
			this.echarts[1] = {series: datas.jdlNumWeek};
			this.echarts[2] = {series: datas.weekNum};
			this.echarts[3] = {series: [{data: datas.totalNum}]};
			this.echarts[4] = {series: [{data: datas.monthNum}]};
		}
	},
	created(){
		this.$store.dispatch('request', {url: '/mock/groups', name: 'groups'});
		this.$store.dispatch('request', {url: '/mock/factorys', name: 'factorys'});
	},
	components: {
		Map: () => import('@/components/home/Map'),
		FactoryMsg: () => import('@/components/home/FactoryMsg'),
		PatchBox: () => import('@/components/global/PatchBox')
	}
}
</script>

<style scoped lang="less">
// header,12.5vh
.patch-box{
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 1vh .4vh;
	height: 12vh;
	box-sizing: border-box;
}
.factory-msg{
	height: 27%;
	background-color: rgba(0,0,0,.5);
}
</style>